<template>
  <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="芳名">
      <a-input
        v-decorator="['name', { rules: [{ required: true, message: '客官想找哪位一亲芳泽啊？' }] }]"
      />
    </a-form-item>
    <a-form-item label="价位">
      <a-input-number :min="299"
        v-decorator="['price', { rules: [{ required: false, message: '客官基础价299！' }] }]"
      />
    </a-form-item>
    <a-form-item label="生日">
      <a-date-picker
                     v-decorator="['birthday', { rules: [{ required: false, message: '客官基础价299！' }] }]"
      />
    </a-form-item>
    <a-form-item label="类型">
      <a-select
        v-decorator="[
          'type',
          { rules: [{ required: false, message: '请选择你喜欢的类型？' }] },
        ]"
        placeholder="选择一个喜欢的类型吧"

      >
        <a-select-option value="空姐">
          空姐
        </a-select-option>
        <a-select-option value="明星">
          明星
        </a-select-option>
        <a-select-option value="少妇">
          少妇
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">
        {{action}}
      </a-button>
      <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
        Clear
      </a-button>
      <a-modal
        title="编辑结果"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <p>{{ ModalText }}</p>
      </a-modal>
    </a-form-item>
  </a-form>


</template>

<script>
  import qs from 'qs'
  import moment from 'moment';
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  };
  const formTailLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
  };
  export default {
    data() {
      return {

        form: this.$form.createForm(this, { name: 'dynamic_rule' }),
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
        action:'入凡尘',
        id:'',
        actionUrl:'/lover/add',
        lover:{},
        // dateFormat: 'YYYY-MM-DD',

      };
    },
    methods: {


      handleOk(e) {

        this.visible = false;
      },
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      handleSubmit(e) {
        //阻止元素发生默认的行为表单提交
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            var data=qs.stringify(
              {
              name:values.name,
              type:values.type,
              price:values.price,
                //a-date-picker 的值是moment，不能直接提交，格式化为固定格式如下
                birthday:values.birthday.format("yyyy-MM-DD"),
                id:this.id

            })
            this.$http({
              url:this.actionUrl,
              method:'post',
                headers:{
                  'Content-type': 'application/x-www-form-urlencoded'
                },
              data
              })
              .then(response => {
                  console.log(response.data)
                 let result=response.data
                this.visible=true
                  this.ModalText=result.msg;

                }
              )
          }
        });
      },

      handleReset() {
        this.form.resetFields();
      },
    },
    mounted() {

      let lover=this.$route.params
      console.log("edit lover ",lover)
      this.id=lover.id
      this.$nextTick(()=>{

          this.form.setFieldsValue({
            name: lover.name,
            price: lover.price,
            type: lover.type,
            //a-date-picker 需要的值是moment，
            birthday: new moment(lover.birthday),

          })


      });


      if (this.id >= 0) {
        this.action="修改"
        this.actionUrl="/lover/update"
      }
    }
  };
</script>
